<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="`${!isEdit ? '新增案件' : '修改案件 - ' + formData.case_number}`"
    :visible="visible"
    :style="{ 'max-height': '100vh' }"
    :before-close="onClose"
    width="70%"
  >
    <div style="max-height: 70vh; overflow-y: auto">
      <el-form
        style="padding: 0 30px"
        ref="form"
        label-width="120px"
        :model="form"
        :rules="rules"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="案件号" prop="case_number">
              <el-input
                placeholder="请输入案件号"
                v-model="form.case_number"
                :disabled="editType"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保险公司" prop="company_name">
              <el-input
                placeholder="请输入保险公司"
                v-model="form.company_name"
              ></el-input>
              <!-- <el-select
                clearable
                placeholder="请选择客户全称"
                v-model="form.company_name"
              >
                <el-option
                  v-for="(e, i) in companyOptions"
                  :key="i"
                  :value="e.label"
                  :label="e.label"
                />
              </el-select> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属区域" prop="address_code">
              <el-cascader
                v-model="form.address_code"
                placeholder="请选择省市区"
                :options="options"
                ref="classifyRef"
                @change="handleChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址" prop="accident_address">
              <el-input
                placeholder="请输入详细地址"
                v-model="form.accident_address"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="案件类型" prop="case_type">
              <el-select clearable v-model="form.case_type">
                <el-option
                  v-for="(e, i) in caseTypeOptions"
                  :key="i"
                  :value="e.value"
                  :label="e.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车牌号" prop="car_number">
              <el-input
                placeholder="请输入车牌号"
                v-model="form.car_number"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="接单时间" prop="receiving_time">
              <el-date-picker
                v-model="form.receiving_time"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="查勘员" prop="surveyer">
              <el-input
                v-model="form.surveyer"
                placeholder="请输入查勘员"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="查勘老师" prop="survey_teacher">
              <el-input
                v-model="form.survey_teacher"
                placeholder="请输入查勘老师"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="损失项目" prop="loss_items">
              <el-input
                v-model="form.loss_items"
                placeholder="请输入损失项目"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="editType">
          <el-col :span="12">
            <el-form-item label="是否中标" prop="is_bidder">
              <el-radio-group v-model="form.is_bidder">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否维修" prop="is_repair">
              <el-radio-group v-model="form.is_repair">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="editType">
          <el-col :span="12">
            <el-form-item label="竞标价格" prop="bid_price">
              <el-input
                v-model="form.bid_price"
                placeholder="请输入竞标价格"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物损方确定报价" prop="damage_customer_price">
              <el-input
                v-model="form.damage_customer_price"
                placeholder="请输入物损方确定报价"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="editType">
          <el-col :span="12">
            <el-form-item label="保险核损价格" prop="write_off_price">
              <el-input
                v-model="form.write_off_price"
                placeholder="请输入保险核损价格"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="案件成本" prop="case_cost">
              <el-input
                v-model="form.case_cost"
                placeholder="请输入案件成本"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="editType">
          <el-col :span="12">
            <el-form-item label="业务费" prop="operation_cost">
              <el-input
                v-model="form.operation_cost"
                placeholder="请输入业务费"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- <el-form-item label="毛利润" prop="gross_profit">
              <el-input
                v-model="form.gross_profit"
                placeholder="请输入毛利润"
              ></el-input>
            </el-form-item> -->
            <el-form-item label="到账时间" prop="receipt_time">
              <el-date-picker
                v-model="form.receipt_time"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" v-if="editType">
            <el-form-item label="维修款支付情况" prop="payment_stu">
              <el-input
                v-model="form.payment_stu"
                placeholder="请输入维修款支付情况"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物损方及电话" prop="damage_customer">
              <el-input
                v-model="form.damage_customer"
                placeholder="请输入物损方及电话"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="editType">
          <el-col :span="12">
            <el-form-item label="维修收款信息" prop="repair_payment">
              <el-input
                v-model="form.repair_payment"
                placeholder="请输入维修收款信息"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维修收款人电话" prop="recipient_phone">
              <el-input
                v-model="form.recipient_phone"
                placeholder="请输入维修收款人电话"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="editType">
          <el-col :span="12">
            <el-form-item label="是否开票及发票号码" prop="invoicing" label-width="140px" style="margin-left: -20px;">
              <el-input
                v-model="form.invoicing"
                placeholder="请输入是否开票及发票号码"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            
          </el-col> -->
        </el-row>
        <el-form-item label="备注" prop="describe">
          <el-input
            v-model="form.describe"
            type="textarea"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="onEnter">提 交</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { regionData } from "element-china-area-data";
import { surveyorList } from "@/api/system/caseManage";
export default {
  name: "caseEdit",
  components: {},
  data() {
    return {
      editType: false,
      options: regionData,
      areaNames: [],
      companyOptions: [
        {
          label: "中国平安财产保险股份有限公司",
          value: 1,
        },
        {
          label: "中国人民财产保险公司",
          value: 2,
        },
        {
          label: "国元农业保险股份有限公司",
          value: 3,
        },
      ],
      customerOptions: [
        {
          label: "张明",
          value: 1,
        },
        {
          label: "李森",
          value: 2,
        },
      ],
      caseTypeOptions: [
        { label: "工程机械类", value: 1 },
        { label: "房屋建筑类", value: 2 },
        { label: "道路设施类", value: 3 },
        { label: "电力/通讯设施类", value: 4 },
        { label: "园林绿化类", value: 5 },
        { label: "庄稼食品类", value: 6 },
        { label: "电器设备类", value: 7 },
        { label: "财产险物损类", value: 8 },
      ],
      form: {},
      rules: {
        case_number: [{ required: true, message: "必需", trigger: ["blur"] }],
        // company_name: [{ required: true, message: "必需", trigger: ["blur"] }],
        // address_code: [{ required: true, message: "必需", trigger: ["blur"] }],
        // accident_address: [{ required: true, message: "必需", trigger: ["blur"] }],
        // case_type: [{ required: true, message: "必需", trigger: ["blur"] }],
        // car_number: [{ required: true, message: "必需", trigger: ["blur"] }],
        // receiving_time: [
        //   { required: true, message: "必需", trigger: ["blur"] },
        // ],
        // surveyer: [{ required: true, message: "必需", trigger: ["blur"] }],
      },
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default() {
        return {};
      },
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    // this.getSurveyor();
  },
  computed: {},
  watch: {
    formData(e) {
      console.log(e, "KKKKKKKKK");
      this.form = {
        ...e,
      };
      if (this.form.address_code) {
        this.form.address_code = this.form.address_code.split(",");
      }
    },
    visible(v) {
      v && this.validateReset();
    },
  },
  methods: {
    getSurveyor() {
      surveyorList().then((res) => {});
    },
    handleChange(e) {
      if (e) {
        this.areaNames = e
          .map((code) => this.findAreaByCode(code, this.options)?.label)
          .filter(Boolean);
      }
      console.log(e, this.areaNames);
    },
    findAreaByCode(code, options) {
      const found = options.find((option) => option.value === code);
      if (found) return found;
      for (const option of options) {
        if (option.children) {
          const childFound = this.findAreaByCode(code, option.children);
          if (childFound) return childFound;
        }
      }
      return null;
    },
    validateReset() {
      this.$refs.form && this.$refs.form.clearValidate();
    },
    onClose() {
      this.$emit("onClose");
      this.form = {};
    },
    formatDateTimes() {
      const formatDateTime = (dateTime) => {
        return dateTime
          ? new Date(dateTime)
              .toLocaleString("zh-CN", { timeZone: "Asia/Shanghai" })
              .replace(/\//g, "-")
          : "";
      };
      this.form.receiving_time = formatDateTime(this.form.receiving_time);
      this.form.receipt_time = formatDateTime(this.form.receipt_time);
    },
    onEnter() {
      this.$refs.form.validate((res) => {
        // let params = {
        //   id: this.form.id,
        //   case_number: this.form.case_number,
        //   company_name: this.form.company_name,
        //   province: this.areaNames[0],
        //   city: this.areaNames[1],
        //   area: this.areaNames[2],
        //   accident_address: this.form.accident_address,
        //   address_code: this.form.address_code,
        //   case_type: this.form.case_type,
        //   car_number: this.form.car_number,
        //   receiving_time: formattedReceivingTime,
        //   surveyer: this.form.surveyer,
        //   survey_teacher: this.form.survey_teacher,
        //   // bid_price: this.form.bid_price,
        //   // is_bidder: this.form.is_bidder,
        //   // is_repair: this.form.is_repair,
        //   loss_items: this.form.loss_items,
        //   // damage_customer_price: this.form.damage_customer_price,
        //   // write_off_price: this.form.write_off_price,
        //   // case_cost: this.form.case_cost,
        //   // operation_cost: this.form.operation_cost,
        //   // gross_profit: this.form.gross_profit,
        //   // receipt_time: receiptTime,
        //   // payment_stu: this.form.payment_stu,
        //   // damage_customer: this.form.damage_customer,
        //   // repair_payment: this.form.repair_payment,
        //   // recipient_phone: this.form.recipient_phone,
        //   // invoicing: this.form.invoicing,
        //   describe: this.form.describe,
        // };
        if (!this.form.id) {
          delete this.form.id;
        }
        if (!this.form.receipt_time) {
          delete this.form.receipt_time;
        }
        if (res) {
          this.formatDateTimes();
          this.$emit("onEnter", this.form);
        }
      });
    },
  },
};
</script>

<style scoped>
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
